{% extends "learning/base.html" %}

{% block title %}登录 · 高中数学助手{% endblock %}

{% block content %}
<section class="card" style="max-width:480px;margin:3rem auto;padding:2.5rem;">
    <div style="text-align:center;margin-bottom:2rem;">
        <div style="width:64px;height:64px;margin:0 auto 1rem;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--accent),var(--primary-500));display:grid;place-items:center;font-size:2rem;color:white;box-shadow:var(--shadow-lg);">
            ∑
        </div>
        <h2 style="margin:0 0 0.5rem 0;font-size:1.75rem;font-weight:700;">欢迎回来</h2>
        <p style="margin:0;color:var(--text-secondary);">
            登录你的账号，继续你的学习之旅
        </p>
    </div>

    <form method="post" novalidate>
        {% csrf_token %}
        
        {% if form.non_field_errors %}
            <div class="message message-error" style="margin-bottom:1.25rem;">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}

        <div style="margin-bottom:1.25rem;">
            <label for="{{ form.username.id_for_label }}" style="margin-bottom:0.5rem;">用户名</label>
            {{ form.username }}
            {% for error in form.username.errors %}
                <small style="color:var(--danger);display:block;margin-top:0.5rem;font-size:0.875rem;">{{ error }}</small>
            {% endfor %}
        </div>

        <div style="margin-bottom:1.5rem;">
            <label for="{{ form.password.id_for_label }}" style="margin-bottom:0.5rem;">密码</label>
            {{ form.password }}
            {% for error in form.password.errors %}
                <small style="color:var(--danger);display:block;margin-top:0.5rem;font-size:0.875rem;">{{ error }}</small>
            {% endfor %}
        </div>

        <button class="button" type="submit" style="width:100%;padding:0.875rem;font-size:1rem;">
            登录
        </button>
    </form>

    <div style="margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle);text-align:center;">
        <p style="margin:0;color:var(--text-secondary);font-size:0.9375rem;">
            还没有账号？
            <a href="{% url 'accounts:register' %}" style="color:var(--accent);font-weight:600;text-decoration:none;">
                创建新账号
            </a>
        </p>
    </div>
</section>
{% endblock %}
